<template>
	<view style="background-color: #f7f6f9;">
		<u-navbar title="资料详情" placeholder bgColor="#fef2e6" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="barnnd">
			<!-- <image :src="swiperlist[0]" mode=""></image> -->
			<u-swiper :list="swiperlist" indicator indicatorMode="line" height="100%" circular></u-swiper>
		</view>
		<!-- 标题、分类部分 -->
		<view class="info">
			<view class="son">
				<view class="title">
					{{ info.goods_name }}
				</view>
				<view class="vtitle">
					{{ info.goods_remark }}
				</view>
				<view class="bottom-box">
					<view class="left">
						<view class="l">
							<image class="icon" src="@/static/img/store.png" mode="aspectFit"></image>
							<view class="txt">
								{{ info.store_name }}
							</view>
						</view>
						<view class="r">
							{{ info.sales_sum }}次打印
						</view>
					</view>

					<view class="right">
						<u-icon name="star" v-if="info.is_collect === 0" @click="hdcollect(1)" labelPos="bottom" color="#717171"
							size="56rpx" labelColor="#8B8B8B" labelSize="28rpx" label="收藏"></u-icon>
						<u-icon name="star-fill" v-else labelPos="bottom" @click="hdcollect(0)" color="#ff9041" size="56rpx"
							labelColor="#8B8B8B" labelSize="28rpx" label="已收藏"></u-icon>
						<view style="width: 36rpx;">

						</view>
						<button class="fx" data-name="shareBtn" open-type="share"><u-icon name="share-square" labelPos="bottom"
								color="#717171" labelColor="#8B8B8B" labelSize="28rpx" size="56rpx" label="分享"></u-icon></button>


					</view>
				</view>
			</view>
		</view>

		<!-- 文件、购买部分 -->
		<view class="bottom-details warp">
			<!-- pdf -->
			<view class="document warp">
				<view class="title">
					<view class="txt">
						文件列表
					</view>
					<view class="r">
						共{{ files }}个（点击预览）
					</view>
				</view>
				<view class="li-box">
					<view class="li" v-for="(item, i) in info.files" :key="i">
						<image src="@/static/img/pdf.png" mode=""></image>
						<view class="content">
							<view class="ctitle">
								{{ item.name }}
							</view>
							<view class="page">
								{{ item.page }}页
							</view>
						</view>
						<view class="preview" @click="androidOpenPdf(item.file)">
							预览
						</view>
					</view>
				</view>
			</view>
			<!-- 购买须知 -->
			<view class="instructions warp">
				<view class="title">
					购买须知
				</view>
				<view class="vtitle">
					<u-parse :content="info.goods_content2"></u-parse>
				</view>

			</view>

			<!-- 资料详情 -->
			<view class="details-box warp">
				<view class="title">
					资料详情
				</view>
				<!-- <image src="https://www.shijuepi.com/uploads/allimg/200821/1-200R1141258.jpg" style="width:100%;" mode=""> -->
				<u-parse :content="info.goods_content"></u-parse>
				<!-- </image> -->
			</view>

			<!-- 购买须知 -->
			<image class="flow" src="@/static/img/flow.png" style="width: 100%; height: 320rpx;" mode=""></image>

			<!-- 底部按钮 -->
			<view class="bottom-nav">
				<view class="nav">
					<view class="l" @click="toGoodsCar">
						<view class="yuandian" v-if="waitPrintNum">
							{{ waitPrintNum }}
						</view>
						<image src="@/static/img/print.png" style="width: 51rpx; height: 47rpx;" mode=""></image>
						<view class="txt">
							待打印
						</view>
					</view>
					<view class="c" @click="addPrint()">
						添加待打印
					</view>
					<view class="r" @click="addPrint(true)">
						立即打印
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import '@/static/icon/iconfont.css'
	import {
		PrintApi,
		StudyApi
	} from '@/api';
	import {
		previewFile
	} from '@/utils/util';
	export default {
		data() {
			return {
				// 轮播图数据
				swiperlist: [],
				info: {}, //商品详情
				goods_id: null,
				files: 0,
				filter_spec: {},
				waitPrintNum: 0,
			};
		},
		async onLoad(option) {
			try {
				const goods_id = option.goods_id
				this.goods_id = goods_id
				this.getinfo()
			} catch (err) {
				console.log(err);
			}

		},
		computed: {
			...mapGetters(['token'])
		},
		onShow() {
			this.getWaitPrintNum()
		},
		onShareAppMessage: function(e) {
			return {
				title: this.info.goods_name,
				path: 'pages/studys/dataDetails?goods_id=' + info.goods_id
			}
		},
		methods: {
			getWaitPrintNum() {
				if (!this.token)
					return
				PrintApi.getCartList()
					.then(res => {
						this.waitPrintNum = res.result.length || 0
					})
					.catch(err => {
						this.$showToast(err || err.msg)
					})
			},
			addPrint(needNav = false) {
				if (!this.token)
					return this.$showToast('请先登录')
				this.$showLoading()
				PrintApi.AjaxJionCart({
						type: 0,
						goods_num: 1,
						goods_id: this.info.goods_id,
						item_id: this.filter_spec.item_id
					})
					.then(res => {
						if (needNav) {
							this.$navTo('pages/indexs/doc/upload')
						}
						uni.hideLoading()
						this.$showToast(res.msg)
						this.getWaitPrintNum()
					})
					.catch(err => {
						uni.hideLoading()
						this.$showToast(err)
					})
			},
			//这里的 url 就是pdf文件的路径，直接调用此方法就可以打开pdf文件
			androidOpenPdf(url) {
				previewFile(url)
			},

			// 商品详情
			async getinfo() {
				try {
					const res = await StudyApi.GoodsInfo({
						goods_id: this.goods_id
					})
					this.swiperlist = res.goods_images
					this.info = res.result
					this.files = res.result.files.length
					const specRes = await StudyApi.Goodspec({
						goods_id: this.goods_id
					})
					this.filter_spec = specRes.result[0]
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			rightClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 收藏
			async hdcollect(val) {
				if (!this.token)
					return this.$showToast('请先登录')
				const res = await StudyApi.HandleCollectGoods({
					goods_id: this.goods_id,
					status: val,
					user_id: uni.getStorageSync('user_id')
				})
				if (res.status === 1) {
					this.$showToast(res.msg)
				}
				this.getinfo()
			},
			toGoodsCar() {
				this.$navTo('pages/indexs/doc/upload')
			},
		}
	}
</script>


<style lang="scss" scoped>
	.fx {
		padding: 0;
		background-color: transparent;
		border: 0;
	}

	.fx::after {
		background-color: transparent;
		border: 0;
	}

	.bottom-details {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;

		.flow {
			margin-top: 30rpx;
			margin-bottom: 200rpx;
		}

		.bottom-nav {
			width: 100%;
			box-sizing: border-box;
			padding: 25rpx 30rpx;
			position: fixed;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			background-color: #fff;

			.nav {
				margin-bottom: $safe-btm-env;
				width: 100%;
				display: flex;

				.r {
					width: 270rpx;
					height: 83rpx;
					line-height: 83rpx;
					border-radius: 15rpx;
					opacity: 1;
					border: 2rpx solid #d8d8d8;
					background: #fd8907;
					color: #ffffff;
					text-align: center;
					font-size: 30rpx;
					font-weight: 400;
				}

				.c {
					width: 270rpx;
					height: 83rpx;
					line-height: 83rpx;
					border-radius: 15rpx;
					opacity: 1;
					border: 2rpx solid #fd8b07;
					background: #ffffff;
					color: #ff890b;
					text-align: center;
					font-size: 30rpx;
					font-weight: 400;
					font-family: "Source Han Sans";
					margin: 0 20rpx 0rpx;
				}

				.l {
					text-align: center;
					width: 94rpx;
					position: relative;

					.yuandian {
						width: 36rpx;
						height: 36rpx;
						text-align: center;
						line-height: 36rpx;
						position: absolute;
						top: -11rpx;
						right: 3rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #fff;
						// border: 1px solid #d8d8d8;
						background: #f22b2e;
						border-radius: 50%;
					}

					.txt {
						margin-top: 16rpx;
						color: #000000;
						text-align: center;
						font-size: 28rpx;
						font-weight: 400;
					}
				}
			}



		}

		.warp {
			background-color: #fff;
			width: 100%;
			padding: 36rpx;
			box-sizing: border-box;
		}

		.details-box {
			border-radius: 0 0 40rpx 40rpx;

			.title {
				color: #000000;
				text-align: left;
				font-size: 32rpx;
				font-weight: 400;
				margin-bottom: 44rpx;
			}
		}

		.instructions {
			margin-top: 30rpx;
			border-radius: 20rpx 20rpx 0 0;

			.title {
				color: #000000;
				text-align: left;
				font-size: 32rpx;
				font-weight: 400;
				margin-bottom: 49rpx;
			}

			.vtitle {
				color: #000000;
				text-align: left;
				font-size: 26rpx;
				font-weight: 400;
			}

		}

		.document {
			border-radius: 20rpx;

			.title {
				display: flex;
				align-items: center;
				width: 100%;

				.txt {
					color: #000000;
					font-size: 32rpx;
				}

				.r {
					margin-left: 20rpx;
					color: #8b8b8b;
					font-size: 26rpx;
					font-weight: 400;
				}
			}

			.li-box {

				.li {
					margin-top: 80rpx;
					width: 623rpx;
					height: 130rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					image {
						height: 109rpx;
						width: 89rpx;
					}

					.content {
						margin-left: 32rpx;
						flex: 1;

						.ctitle {
							color: #000000;
							text-align: left;
							font-size: 30rpx;
							font-weight: 400;
						}

						.page {
							margin-top: 30rpx;
							color: #9b9b9b;
							text-align: left;
							font-size: 26rpx;
							font-weight: 400;
						}

						.preview {
							width: 93rpx;
							height: 50rpx;
							line-height: 50rpx;
							border-radius: 5rpx;
							border: 1rpx solid #848484;
							background: #ffffff;
							color: #000000;
							text-align: center;
							font-size: 27rpx;
							font-weight: 400;
						}
					}
				}
			}
		}

	}

	.barnnd {
		width: 750rpx;
		height: 500rpx;
		box-sizing: border-box;
	}

	.info {
		width: 750rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #f7f6f9;

		.son {
			width: 100%;
			height: 383rpx;
			box-sizing: border-box;
			padding: 36rpx 34rpx;
			background-color: #fff;

			.title {
				color: #000000;
				font-size: 32rpx;
				font-weight: 400;
				font-family: "Source Han Sans";
			}

			.vtitle {
				color: #8b8b8b;
				font-size: 26rpx;
				font-weight: 400;
				font-family: "Source Han Sans";
				margin: 41rpx 0 65rpx 0;
			}

			.bottom-box {
				display: flex;

				.right {
					display: flex;
					align-items: center;
					margin-left: auto;
				}

				.left {
					display: flex;
					align-items: center;

					.l {
						padding: 0 20rpx;
						height: 55rpx;
						border-radius: 8rpx;
						border: 1rpx solid #d8d8d8;
						background: #ffe7cb;
						line-height: 55rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.icon {
							width: 28rpx;
							height: 26rpx;
							color: #6d6d6d;
						}

						.txt {
							margin-left: 12rpx;
							color: #6d6d6d;
							font-size: 26rpx;
							font-weight: 400;
							font-family: "Source Han Sans";
						}
					}

					.r {
						color: #8b8b8b;
						font-size: 26rpx;
						font-weight: 400;
						font-family: "Source Han Sans";
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>